@charset "utf-8";
/* 头部 */
header{
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 98px;
	padding: 0 40px 0 47px;
	.logo {
		width: 69px;
		height: 65px;
		img {
			width: 100%;
		}
	}
	nav {
		display: flex;
		ul {
			display: flex;
			li {
				position: relative;
				display: flex;
				margin-left: 80px;
				a {
					text-align: center;
					h3 {
						font-size: 16px;
						color: #0d0d0d;
						transition: all .5s;
					}
					span {
						font-size: 14px;
						color: #838383;
						transition: all .5s;
					}
				}
				&:hover a h3, &:hover a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					background-color: #d6d6d6;
					transition: all 1s;
				}
				&:hover::before {
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
				}
				&:hover::after {
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
				}
			}
			.active {
				position: relative;
				a h3,a span {
					color: #12b2a5;
				}
				&::before {
					content: "";
					position: absolute;
					left: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(-25px) rotate(35deg);
					background-color: #d6d6d6;
				}
				&::after {
					content: "";
					position: absolute;
					right: 0;
					top: 0;
					width: 1px;
					height: 40px;
					transform: translateY(25px) rotate(35deg);
					background-color: #d6d6d6;
				}
			}
		}
		.weixin {
			margin-left: 67px;
		}
	}
}
// 轮播
.swiper {
	background-color: #222222;
	section {
		display: flex;
		width: 1045px;
		height: 527px;
		margin: 0 auto;
		.swp_left {
			position: relative; 
			width: 425px;
			height: 100%;
			.shouzhi {
				position: absolute;
				top: 0;
				right: 10px;
				width: 216px;
				height: 346px;
				cursor: pointer;
				img {
					width: 100%;
				}
			}
			.h_icon {
				display: flex;
				position: absolute;
				bottom: 75px;
				left: 0;
				img {
					width: 88px;
					height: 88px;
					margin: 0 7px;
					cursor: pointer;
				}
			}
		}
		.swp_content {
			position: relative;
			width: 207px;
			height: 100%;
			.phone_img {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 206px;
				height: 404px;
				img {
					width: 100%;
				}
			}
			.swiper_img {
				position: absolute;
				top: 95px;
				left: 50%;
				transform: translateX(-50%);
				width: 180px;
				height: 321px;
				overflow: hidden;
				cursor: pointer;
				img {
					width: 100%;
					height: 100%;
				}
			}
			ol {
				position: absolute;
				display: flex;
				bottom: 30px;
				left: 50%;
				transform: translateX(-50%);
				li {
					width: 12px;
					height: 12px;
					background-color: #393939;
					border-radius: 50%;
					margin: 0 4px;
					cursor: pointer;
					transition: background-color .5S;
					&:hover {
						background-color: white;
					}
				}
				.active {
					background-color: #dadada;
				}
			}
		}
		.swp_right {
			position: relative;
			width: 413px;
			height: 100%;
			.more {
				position: absolute;
				top: 93px;
				left: 30px;
				h4 {
					font-size: 32px;
					color: #2ce3c9;
					&:first-of-type {
						font-size: 25px;
					}
				}
				p {
					font-size: 14px;
					color: #7a7a7a;
					line-height: 1.5;
					&:first-of-type {
						margin-top: 5px;
					}
				}
				button {
					width: 107px;
					height: 42px;
					background-color: #12b1a4;
					border: 0;
					border-radius: 42px;
					cursor: pointer;
					color: white;
					font-weight: bold;
					margin-top: 15px;
					transition: width .5s;
					&:hover {
						width: 140px;
						color: black;
					}
				}
			}
			.h_icon {
				position: absolute;
				display: flex;
				right: 0;
				bottom: 75px;
				img {
					width: 88px;
					height: 88px;
					margin: 0 7px;
					cursor: pointer;
				}
			}
		}
	}
}
// 内容
.main {
	position: relative;
	&>img {
		position: absolute;
		&:nth-child(1) {
			top: 1457px;
			left: 35px;
			width: 133px;
			height: 120px;
		}
		&:nth-child(2) {
			top: 1745px;
			right: 58px;
			width: 102px;
			height: 92px;
		}
	}
	// 第一种
	.main_one {
		width: 780px;
		margin: 0 auto;
		&::before {
			content: "";
			position: absolute;
			left: 51px;
			top: 0;
			width: 102px;
			height: 83px;
			background: url(../img/mogu.png) center center / cover;
		}
		&::after {
			content: "";
			position: absolute;
			right: 68px;
			top: 241px;
			width: 86px;
			height: 79px;
			background: url(../img/youxi.png) center center / cover;
		}
		ul {
			position: relative;
			padding: 69px 0 0;
			display: flex;
			justify-content: space-around;
			align-items: flex-end;
			li {
				text-align: center;
				img{
					
				}
				div {
					h4 {
						margin-top: 30px;
						font-style: italic;
						font-size: 18px;
					}
					p {
						margin-top: 10px;
						font-size: 11px;
						color: #939597;
					}
				}
				&:nth-child(1)>div {
					margin-left: -32px;
				}
				&:nth-child(2)>div {
					margin-left: -55px;
				}
				// &:not(:last-of-type)::after {
				// 	content: "";
				// 	position: absolute;
				// 	top: 78px;
				// 	right: -80px;
				// 	width: 24px;
				// 	height: 47px;
				// 	background: url(../img/right_arrow.png);
				// }
			}
			&::before {
				content: "";
				position: absolute;
				top: 50%;
				left: 28%;
				transform: translateY(-50%);
				width: 24px;
				height: 47px;
				background: url(../img/right_arrow.png);
			}
			&::after {
				content: "";
				position: absolute;
				top: 50%;
				right: 33%;
				transform: translateY(-50%);
				width: 24px;
				height: 47px;
				background: url(../img/right_arrow.png);
			}
		}
	}
	// 第二种
	.main_two {
		width: 780px;
		margin: 90px auto 0;
		&::before {
			content: "";
			position: absolute;
			left: 0;
			top: 646px;
			width: 171px;
			height: 145px;
			background: url(../img/jiantou.png) center center / cover;
			z-index: -1;
		}
		&::after {
			content: "";
			position: absolute;
			right: 0;
			top: 987px;
			width: 119px;
			height: 133px;
			background: url(../img/tanchi.png) no-repeat center center / cover;
		}
		.m_title {
			display: flex;
			div {
				h4 {
					font-size: 29px;
				}
				p {
					font-size: 15px;
					color: #3e3e3e;
					span {
						color: #000000;
						font-weight: bold;
					}
				}
			}
			&>p {
				font-size: 10px;
				color: #bcbcbc;
				padding: 6px 0 0 15px;
				line-height: 1.5;
			}
		}
		.m_body {
			margin-top: 25px;
			display: flex;
			justify-content: space-between;
			li {
				width: 247px;
				.header {
					background-color: #eaeaea;
					padding: 20px;
					.title {
						display: flex;
						justify-content: space-between;
						h5 {
							font-size: 20px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
						a {
							flex-shrink: 0;
							width: 50px;
							height: 24px;
							border-radius: 30px;
							line-height: 24px;
							text-align: center;
							display: inline-block;
							vertical-align: middle;
							background-color: #10a89a;
							color: white;
							font-size: 11px;
							&:hover {
								color: black;
							}
						}
					}
					.date {
						display: flex;
						justify-content: space-between;
						color: #737373;
						p {
							position: relative;
							margin-top: 10px;
							&::after {
								content: "";
								width: 28px;
								height: 1px;
								position: absolute;
								left: 0;
								bottom: -8px;
								background-color: #808080;
							}
							span {
								display: block;
								font-size: 11px;
							}
						}
						i {
							align-self: flex-end;
							font-size: 30px;
							cursor: pointer;
						}
					}
				}
				.showImg {
					position: relative;
					cursor: pointer;
					width: 100%;
					height: 282px;
					overflow: hidden;
					img {
						display: block;
						width: 100%;
						height: 100%;
					}
					.mask {
						position: absolute;
						display: table;
						text-align: center;
						left: 0;
						top: 0;
						width: 100%;
						height: 100%;
						// line-height: 338px;
						opacity: 0;
						background-color: rgba(0,0,0,.5);
						transition: all .8s;
						a {
							display: table-cell;
							vertical-align: middle;
							color: white;
						}
					}
					&:hover .mask {
						opacity: 1;
					}
				}
			}
		}
		.m_share {
			padding-top: 15px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			li {
				display: flex;
				margin-top: 25px;
				width: 48%;
				border: 1px solid #eae9e9;
				height: 141px;
				.share_left {
					display: flex;
					flex-direction: column;
					width: 46px;
					.l_top {
						height: 47px;
						img {
							display: block;
							width: 100%;
						}
					}
					.l_conter {
						height: 47px;
						display: flex;
						flex-direction: column;
						background-color: #fed736;
						text-align: center;
						p {
							font-size: 21px;
						}
						span {
							font-size: 10px;
						}
					}
					.l_bottom {
						height: 47px;
						display: flex;
						justify-content: center;
						align-items: center;
						background-color: #363942;
						color: white;
						.icon-star {
							font-size: 30px;
						}
					}
				}
				.share_center {
					width: 203px;
					box-sizing: border-box;
					text-align: right;
					display: flex;
					flex-direction: column;
					height: 100%;
					overflow: hidden;
					padding: 0 20px;
					h5 {
						font-size: 13px;
						margin-top: 20px;
						margin-bottom: 20px;
					}
					p {
						font-size: 10px;
						line-height: 1.8;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
				.share_right {
					width: 131px;
					height: 100%;
					overflow: hidden;
					img {
						display: block;
						width: 100%;
						display: block;
						cursor: pointer;
						transition: all .5s;
						&:hover {
							transform: scale(1.2);
						}
					}
				}
			}
		}
	}
}
footer {
	position: relative;
	img {
		display: block;
		width: 100%;
	}
	p {
		position: absolute;
		left: 50%;
		top: 70%;
		transform: translateX(-50%);
		color: white;
		font-size: 12px;
	}
}